﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
     <title>PhyTouch</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <style>
        * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-ms-touch-action: none;
}

body,ul,li {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	font-size: 12px;
	font-family: ubuntu, helvetica, arial;
	overflow: hidden; /* this is important to prevent the whole page to bounce */
}

        #header {
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 45px;
            line-height: 45px;
            background: #00ABEB;
            padding: 0;
            color: #eee;
            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }
     #controller,  #testImg {
        width: 210px; height: 210px; position: absolute; top: 50%; left: 50%; margin-left: -105px; margin-top: -105px;
         }
    
      #controller{
          z-index:10;
      }
      #controller .right{
          border:1px solid #ccc;
          width:60px;
          height:210px;
          position:absolute;
          right:0px;
      }
      #controller .left{
          border:1px solid #ccc;
          width:60px;
          height:210px;
          position:absolute;
          left:0px;
      }
       #controller .top{
          border:1px solid #ccc;
          width:90px;
          height:90px;
          position:absolute;
          top:0px;
          left:60px;
      }

         #controller .bottom{
          border:1px solid #ccc;
          width:90px;
          height:90px;
          position:absolute;
          bottom:0px;
          left:60px;
      }

         #controller.noBorder .item{
             border:0px solid #ccc;
         }
    </style>
</head>
<body>
    <div id="header">PhyTouch</div>
    <div style="text-align:center;position:relative;top:60px;"><button id="toogleBtn">Toogle Debug</button> </div>
    <div id="controller" class="noBorder">
        <div class="top item"> </div>
        <div class="right item"> </div>
        <div class="bottom item"> </div>
        <div class="left item"> </div>
    </div>
    <div id="testImg">
        <img style="width: 210px; height: 210px;" src="asset/lt.png" alt="" />
    </div>
    
    <a href="https://github.com/AlloyTeam/PhyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:100px;height:100px;">
        <img src="//alloyteam.github.io/github.png" style="width:100px;" alt="">
    </a>
    <script src="../transformjs/transform.js"></script>
    <script src="../index.js"></script>
    <script>
        var target = document.querySelector("#testImg");
        //给element注入transform属性
        Transform(target);

        new PhyTouch({
            touch: "#controller .right",//反馈触摸的dom
            target: target, //运动的对象
            property: "rotateZ",  //被滚动的属性
            sensitivity: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
            change: function () { }
        })

        new PhyTouch({
            touch: "#controller .left",//反馈触摸的dom
            target: target, //运动的对象
            property: "rotateZ",  //被滚动的属性
            sensitivity: -1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
            change: function () { }
        })

        new PhyTouch({
            touch: "#controller .top",//反馈触摸的dom
            vertical: false,
            target: target, //运动的对象
            property: "rotateZ",  //被滚动的属性
            sensitivity: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
            change: function () { }
        })

        new PhyTouch({
            touch: "#controller .bottom",//反馈触摸的dom
            vertical: false,
            target: target, //运动的对象
            property: "rotateZ",  //被滚动的属性
            sensitivity: -1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
            change: function () { }
        })

        var controller = document.querySelector("#controller");
        document.querySelector("#toogleBtn").onclick = function () {
            controller.classList.toggle("noBorder");

        }
    </script>
</body>
</html>
